<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="../../js/mui.min.js"></script>
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link href="../../css/share/common.css" rel="stylesheet" />
		<style>
			.navbar-shadow {
				width: 100%;
				display: block;
				position: fixed;
			}
			.navInnerBar {
				display: block;
				width: 85%;
				height: 100%;
				margin: 0 auto;
				background-color: #C50000;
			}
			#navBar_fun {
				background-color: #FFF;
				position: absolute;
				top: 0px;
				left: 0px;
				width: 100%;
				height: 48px;
				border-bottom: 1px solid #ccc;
			}
			#navBar_fun .navBar_btn {
				float: left;
				width: 25%;
				height: 50px;
				color: #858585;
				line-height: 48px;
				text-align: center;
			}
			#navBar_fun  .active {
				color: #da4453;
			}
			#navBar_fun .navBar_btn img {
				vertical-align: middle;
				margin-right: 5px;
				width: 20px;
			}
			#navBar_fun .navBar_bar {
				position: absolute;
				bottom: 0;
				left: 0%;
				height: 2px;
				width: 25%;
				-webkit-transition-transform: translateX(0%);
				transform: translateX(0%);
				-webkit-transition: all 0s;
				transition: all 0s;
			}
			#navBar_fun .navBar_bar .navBar_bar_inner {
				position: absolute;
				bottom: 0;
				left: 50%;
				height: 3px;
				width: 80%;
				background-color: #da4453;
				-webkit-transform: translateX(-50%);
				transform: translateX(-50%);
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" id="header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left header-left"></a>
			<a id="info" class="mui-icon mui-pull-right header-right header-right-iocn"></a>
			<h1 id="title" class="mui-title">服务申请管理</h1>
		</header>
		<div class="mui-content">
			<div class="navbar-shadow">
				<div id="navBar_fun" class="navBar_fun">
					<div class="navBar_btn active" id="defaultTab" name="applyed.html" tabindex="0">
						已申请
					</div>
					<div class="navBar_btn" tabindex="1" name="handing.html">
						处理中
					</div>
					<div class="navBar_btn" tabindex="2" name="finish.html">
						已完成
					</div>
					<div class="navBar_btn" tabindex="3" name="cancel.html">
						已取消
					</div>
					<div class="navBar_bar"> <span class="navInnerBar"></span> </div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" charset="UTF-8">
		mui.init();
		var subpage_style = {
			top: '105px',
			bottom: '0px',
			bounce: 'vertical'
		};
		var self;
		var move = mui(".navBar_bar")[0]; //移动对象
		var tabs = mui('.navBar_btn'); //点击对象
		//创建子页面，首个选项卡页面显示，其它均隐藏；
		mui.plusReady(function() {
			self = plus.webview.currentWebview();
			var defaultTab = document.getElementById("defaultTab");
			//模拟首页点击
			mui.trigger(defaultTab, 'tap');
		});
		//当前激活选项
		var activeTab = 1;
		//选项卡点击事件
		mui("#navBar_fun").on('tap', '.navBar_btn', function(e) {
				var viewid = vurl = this.getAttribute("name"); //获得当前点击窗口id
				var index = this.getAttribute("tabindex");
				var targetView = plus.webview.getWebviewById(viewid);
				for (var i = 0; i < tabs.length; i++) {
					tabs[i].classList.remove("active");
				}
				move.style.transform = "translateX(" + index * 100 + "%)";
				move.style.webkitTransform = "translateX(" + index * 100 + "%)";
				this.classList.add("active");
				if (targetView == activeTab) {
					return;
				}
				if (targetView) {
					var allwebview = self.opened();
					for (var i = 0; i < allwebview.length; i++) {
						allwebview[i].hide();
					}
					plus.webview.show(targetView, "fade-in", 150)
					activeTab = targetView;
				} else {
					creatView(vurl, viewid);
				}
			})
			//创建不同子webview
		function creatView(vurl, viewId) {
			var sub = plus.webview.create(vurl, viewId, {
				top: '105px',
				bottom: '0px',
				bounce: 'vertical'
			});
			self.append(sub);
			activeTab = sub;
		}
		/*mui.back = function() {
			child = self.children();
			for (var cd in child) {
				child[cd].close(0)
			}
			self.close(100)
		}*/
	</script>

</html>